<template>
    <div class="zn_nav">
        <van-row>
            <van-col span="20" offset="2">
                <div class="van_cells">
                    <van-cell icon="arrow-left"
                              size="large"
                              @click="go()"
                              :title="page"/>
                </div>

                <div v-if="type==='yw'">
                    <div class="groups">
                        <div class="van_cells" v-for="(item,index) in hosData">
                            <van-cell-group>
                                <van-cell icon="location-o"
                                          size="large"
                                          is-link
                                          @click="addr(index)"
                                          :title="item.hos_name"
                                          :label="item.address"/>
                            </van-cell-group>
                        </div>
                    </div>
                </div>
                <div v-if="type==='yn'">
                    <div class="groups">
                        <div class="van_cells" v-for="item in hosData">
                            <van-cell-group>
                                <van-cell
                                          size="large"
                                          is-link
                                          :to="'/wechat/navnei?hid='+item.id"
                                          :title="item.hos_name"
                                          />
                            </van-cell-group>
                        </div>
                    </div>
                </div>

            </van-col>
        </van-row>

    </div>
</template>

<script>
    import {TMap} from "../../../assets/js/tencentMap";
    import wx from 'weixin-js-sdk';

    export default {
        name: "navwai",

        data: function () {
            return {
                type:'',
                page:'',
                showPicker: false,
                addrData: {
                    latitude: '',
                    longitude: '',
                    speed: '',
                    accuracy: '',
                },
                hosData:[],
                local:{},
                geocoder:{},
                addInfo:{},
            }
        },
        created(){
            this.getJsTic();
            this.getHos();
            this.type = this.$route.query.type;
            if(this.type==='yw'){
                this.page = '院外导航';
            }else{
                this.page = '院内导航';
            }

        },
        mounted() {
            TMap('4KSBZ-WUKCW-3SLRW-OPNLK-VIHG3-FJBKT').then(qq => {
                var callbacks={
                    complete:(results)=>{
                        this.local = results.detail.location
                        wx.openLocation({
                            latitude: this.local.lat, // 纬度，浮点数，范围为90 ~ -90
                            longitude: this.local.lng, // 经度，浮点数，范围为180 ~ -180。
                            name: this.addInfo.name, // 位置名
                            address: this.addInfo.addr, // 地址详情说明
                            scale: 18, // 地图缩放级别,整形值,范围从1~28。默认为最大
                            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                        });
                    },
                }
                this.geocoder = new qq.maps.Geocoder(callbacks);
            });
        },
        methods:{
            //js-sdk 验证
            getJsTic(){
                this.axios.post('/app/wechat/ApiWechat/jsSdk',{ mid:2,url:location.href.split('#')[0] }).then(({data})=>{

                    if(data.appId!==undefined){
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: data.appId, // 必填，公众号的唯一标识
                            timestamp: data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: data.nonceStr, // 必填，生成签名的随机串
                            signature: data.signature,// 必填，签名
                            jsApiList: ['openLocation','getLocation'] // 必填，需要使用的JS接口列表
                        });
                    }

                })
            },
            getHos(){
                this.axios.post('/app/wechat/Navigat/wai/mid/2.html').then(({data})=>{
                    if(data.error===0){
                        this.hosData = data.info;
                    }

                }).catch()
            },
            //打开内置地图
            addr(index){
                this.addInfo = {
                    name:this.hosData[index].hos_name,
                    addr:this.hosData[index].address
                };
                this.geocoder.getLocation(this.hosData[index].hos_addr);
            },
            go(){
                window.history.go(-1);
            }

        }
    }
</script>

<style scoped>
    .zn_nav {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: url(../../../assets/img/glyy.jpg) no-repeat center center;
        background-size: cover;
        position: relative;
    }
    .van_cells{
        margin-top: 3vh;
        border-radius:10px;
        overflow: hidden;
    }
    .groups:first-child{
        margin-top: 15vh;
    }

</style>